<html>
	<title>图片切换</title>
	<body>
		<div id="app">
			<div>
				<button @click='prev' v-show='index!=0'> - </button>
				<img v-bind:src = 'imgUrl[index]'/> <!-- v-bind可以省略 直接使用 ：src -->
				<button @click='next' v-show='index<imgUrl.length-1'> + </button>
			</div>
		</div>
		<script  src='./js/vue.js'></script>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					imgUrl:[
					"./img/01.jpg",
					"./img/02.jpg",
					"./img/03.jpg",
					"./img/04.jpg",
					"./img/05.jpg",
					"./img/06.jpg",
					"./img/07.jpg",
					"./img/08.jpg",
					],
					index:0
				},
				methods:{
					prev:function(){
							this.index --;
					},
					next:function(){
							this.index ++;
					}
				}
			}) 
		</script>
	
	</body>
</html>